<template>
      <div>
        <el-container>
          <el-aside width="200px;" style="height: 100vh;">
            <ul class="menu">
            <template v-for="item in menuList" >  
                  
                  <template v-if="item.child !=null">
                    <li class="point"> 
                      <i :class="item.icon"></i> {{item.menuName}} 
                    </li>
                      <ul class="subMenu">
                        <li class="subLink" @click="toLink(child.urlPath)"  v-for="child in item.child">
                            <i :class="child.icon"></i> {{child.menuName}}
                        </li>
                      </ul>
                  </template>
                  <template v-else>
                    <li class="subLink" @click="toLink(item.urlPath)" > 
                        <span><i :class="item.icon"></i> </span> {{item.menuName}} 
                    </li>
                  </template>
            </template>
          </ul>
              
              

          </el-aside>


          
          <el-container>
            <el-header style="text-align: right; font-size: 16px;">
              <el-dropdown  @command="handleCommand" >
                <i class="el-icon-setting" style="margin-right: 15px"> {{userInfo.nickName}}</i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-switch-button" command="logout" >
                    退出
                  </el-dropdown-item>
                  <el-dropdown-item icon="el-icon-key" command="changepwd" >
                    修改密码
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- 
              <span>{{userInfo.nickName}}</span>
               -->
            </el-header>
            
            <el-main>
              <!-- 中间页 -->
              <el-card class="box-card">
                <router-view></router-view>
              </el-card>
              
            </el-main>
          </el-container>
        </el-container>

      </div>
    
</template>
  
  <script>
  export default {
    name: 'Home',
    data(){
      return {
        menuList:[],
        userInfo:{}
      }
    },
    created(){
      console.log("-----------home----------------")
      this.api.loadMenu().then(res=>{
        if(res.code==0){
            this.menuList=res.data;
        }
      },err=>{});
      this.userInfo=JSON.parse(localStorage.getItem("userInfo"));
    },
    methods: {
      handleCommand(command){
        console.log("---------****-----------",command)
        if(command == 'logout'){
          this.logout();
        }
      },
      logout(){
        //localStorage.setItem("token","");
        console.log("---------退出登录-----------")
        this.$router.push("login");
      },
      toLink(path){
        this.$router.push(path);
      }
    }
  }
  </script>

  <style scoped>
    ul{
      list-style: none;
      padding: 0;
    }
    .menu{
      margin-left:20px;
      margin-right: 20px;
    }
    .menu> li{
      padding: 10px;
      font-size: 14px;
      font-weight:bold;
    }
    .subMenu> li{
      display: block;
      padding: 10px;
      padding-left: 30px;
      padding-right: 20px;
      font-size: 14px;
      font-weight:bold;
    }
    .point{
      cursor:default;
    }
    .subLink{
      cursor:pointer;
    }
    .subLink:hover{
      background-color: #DDD;
    }
    .subLink:hover i{
      color: #67C23A;
    }

  </style>
  